<template>
  <div class="box">
    <div class="boxItem">
      <h3>组件的封装之分页组件</h3>
      <div class="compBox">
        <Pagination
          :pagination="pagination"
          @changePage="changePage"
          :total="total"
        />
        <el-button type="success" size="small" round @click="resetHandle"
          >重置</el-button
        >
        <div>子组件传递过来的值:{{ payload }}</div>
      </div>
    </div>

    <div class="boxItem">
      <h3>组件的封装之UpLoad上传组件</h3>
      <div class="compBox">
        <Upload :limit="limit" @changeImg="changeImg" />
        <div>子组件传递过来的值{{ imgList }}</div>
      </div>
    </div>
    <div class="boxItem">
      <h3>基本form表单的验证(phone,email.idcard,identityImg)</h3>
      <!--表单的校验-->
      <Formcheck />
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import Upload from "@/components/Upload";
import Formcheck from "@/components/Formcheck";

export default {
  components: {
    Pagination,
    Upload,
    Formcheck,
  },
  data() {
    return {
      pagination: {
        currentPage: 1,
        pageSize: 10,
      },
      limit: 3,
      total: 40,
      payload: {},
      imgList: [],
    };
  },
  methods: {
    changePage(payload) {
      console.log("传递的值");
      console.log(payload);
      this.payload = payload;
    },
    changeImg(payload) {
      this.imgList = payload;
    },
    resetHandle() {
      this.pagination = {
        currentPage: 1,
        pageSize: 10,
      };
    },
  },
};
</script>

<style lang="less" scoped>
.boxItem {
  background: #fff;
  padding: 15px;
  margin-bottom: 20px;
  h3 {
    text-align: left;
  }
  .compBox {
    text-align: left;
    margin: 15px 0;
    display: flex;
  }
}
</style>